<template>
  <view class="content bg-white">
    <uni-section  title="选择建筑物" type="line" >
      <template v-slot:right>
        <view class="flexrowcenter"  @click="goToAddBuilding">
          <text class="text-lg text-blue margin-right-xs">新增</text>
          <uni-icons type="plus" size="28"
                     color="#0081ff"
                    />
        </view>
      </template>
    </uni-section>

    <z-paging ref="paging"  v-model="listData" @query="queryList" class="bg-white flex1">
    <uni-search-bar @confirm="search" :focus="true" v-model="searchValue"
                    placeholder="请输入建筑物名称"

     />
        <uni-list-item
            v-for="(item,index) in listData"
            :key="index"
             class="item-list-content"
                       clickable
                       @click="openAlert(item)"

                       >
          <template v-slot:header>
            <view class="flexcenter">
              <text class="text-black">
                {{ item.buildingName}}
              </text>
            </view>

          </template>

          <template v-slot:footer>
            <view style="width: 200px;min-height:100px " class="flexrowcenter padding-tb margin-tb">
              <text class="text-sm">
                {{ item.address}}
              </text>
            </view>

          </template>
        </uni-list-item>

    </z-paging>
  </view>
</template>
<script>
import { getBuildingPage } from "@/api/building/index"
export default {
  name: "select-building",
  data() {
    return {
      searchValue:'',
      listData:[],
      clickItem:{

      }
    }
  },
  onLoad(){
    uni.$on('refresh-building-list', function() {
      this.$refs.paging.refresh()
    })
  },
  onUnload() {
    uni.$off('refresh-building-list')
  },
  methods: {
    search(){
      console.log('buildingNameOrAddress搜索')
      this.$refs.paging.refresh()
    },
    openAlert(item){
      this.clickItem = item
      uni.showModal({
        title: '提示',
        content: `绑定${item.buildingName}建筑？`,
        cancelText: '取消',
        confirmText: '确定',
        success: function (res) {
          console.log(res)
          if(res.confirm){
            uni.$emit('selected-building',item)
          }else if(res.cancel){

          }
        }
      })

    },
    queryList(pageNo, pageSize) {
      if(pageNo == 1){
        uni.showLoading({
          title: "请求中...",
        })
      }
      getBuildingPage({
        pageNo: pageNo,
        pageSize: pageSize,
        buildingNameOrAddress:this.searchValue
      }).then(res => {
        uni.hideLoading()
        const list = res.data.list || []; // 读取 data 数据
        this.$refs.paging.complete(list);

      })
    },
    goToAddBuilding(){
      uni.navigateTo({
        url: '/pages/mine/building/CreateOrEditBuilding'
      })
    }
  }
}
</script>

<style scoped>
.content{
  height: 1000rpx;
  width:750rpx;
  display: flex;
  flex-direction: column;

}
.item-list-content {
  height: 50px;
  width: 750rpx;
}


</style>